<template>
    <a-config-provider :locale="zhCN">
    <a-tabs v-model:activeKey="activeKey" size="large" :tabBarGutter=100 centered>
        <a-tab-pane key="1">
            <template #tab>
            <span style="font-weight: bold;">
                借阅人
            </span>
            </template>
            <borrowers />
        </a-tab-pane>
        <a-tab-pane key="2">
            <template #tab>
            <span style="font-weight: bold;">
                书 单
            </span>
            </template>
            <books />
            <!-- v-if="activeKey === '2'"  使得切换非当前的tab时，不渲染dom，切换tab echart图表每次加载dom，保证功能正常 -->
        </a-tab-pane>
    </a-tabs>
    </a-config-provider>
    <contact />
</template>
<script>
import { defineComponent,onMounted,ref } from "vue";
import Borrowers from "@/components/Borrowers.vue";
import Books from "@/components/Books.vue";
import '@/assets/js/watermark'
import zhCN from 'ant-design-vue/es/locale/zh_CN'
import dayjs from 'dayjs'
import 'dayjs/locale/zh-cn'
import Contact from '@/components/Contact.vue'
dayjs.locale('zh-cn')

    export default defineComponent(
        {
            name:'LibraryView',
            components:{
                Borrowers,
                Books,
                Contact,
            },
            setup(){
                const activeKey = ref('2');
                onMounted(() => {watermark.load({watermark_txt: "欢迎关注公众号：仰望天空的蜗牛"})});
                return {
                    activeKey,
                }

            }
        }
    )
</script>